import React,{Component} from 'react';
import {Link} from 'react-router-dom'
import NavBar from "../../components/nav-bar";
import './reg.css'
import UcButton from "../../components/button/uc-button";
import UcInput from "../../components/uc-input";
import {queryReg} from "../../api/user";

export default class Reg extends Component {

  state = {
    username:'aa',
    password:'aa123',
    mess:''
  };

  async componentDidMount(){
  }

  checkIpt=ev=>this.setState({[ev.target.name]:ev.target.value});

  reg = async () => {

    let {err,msg} = await queryReg({username:this.state.username, password:this.state.password});
    console.log(1111,err, msg)
    if (err === 1){
      this.setState({mess:msg});

    } else if (err === 0 ) {

      this.props.history.push('/login')
    }
  };

  render(){
    let {username,password,mess} = this.state;
    return (
      <div className="content">
        <NavBar
          onLeftClick={()=>this.props.history.go(-1)}
          icon={<img alt="" src={require('../../assets/img/history1.png').default}/>}
        />
        <h1> </h1>
        <div className="login-box">
          <p className="lsolid"></p>
          <div className="login">
            <Link to="/login">登录</Link>
            <span></span>
            <Link to="/reg">注册</Link>
          </div>
          <p className="rsolid"></p>
        </div>
        <ul>
          <UcInput
            label="用户"
            model={{name:'username',value:username,onChange:this.checkIpt}}
          />
          <UcInput
            label="密码"
            type="password"
            model={{name:'password',value:password,onChange:this.checkIpt}}
          />
          {mess}
        </ul>
        <div className="footbox" style={{marginTop:'1rem'}}>
          <UcButton size="large" onClick={this.reg}>注 册</UcButton>
          <a href="#forget" className="tishi">忘记密码？</a>
        </div>
      </div>
    )
  }
}